<template>
	<view class="love-box">
		<u-navbar class="tab-box" :is-back="false" background="#f5f5f5">
			<u-tabs-swiper class="tab-swiper-box" active-color="#1CBCD0" bg-color="transparent" bold
				inactive-color="#010101" bar-width="72" bar-height="8" ref="uTabs" :list="list" :current="current"
				@change="tabsChange" :is-scroll="false" font-size="32"
				:active-item-style="{'font-size':'36rpx'}"></u-tabs-swiper>
		</u-navbar>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<chatList ref="chatList"></chatList>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="firends-box">
					<u-image width="100%"  height="1850rpx"
						src="https://cdn.osisx.com/images/qyq.png"></u-image>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="find-box">
					<u-image   height="840rpx"
					mode="aspectFill"
						src="https://cdn.osisx.com/images/faxian.png"></u-image>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import chatList from '@/components/ai-chat/index.vue';
	export default {
		components: {
			chatList
		},
		data() {
			return {
				list: [{
					name: '聊天'
				}, {
					name: '朋友圈'
				}, {
					name: '发现'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onShow() {
			// 刷新聊天列表
			this.$refs.chatList.userTalkList()
		},
		onPullDownRefresh() {
			// 刷新聊天列表
			this.$refs.chatList.userTalkList()
		},
		onReachBottom() {
			// 刷新聊天列表
			this.$refs.chatList.userTalkList()
		},
		onLoad(options) {

		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;

				switch (current) {
					case 0:
						// 刷新聊天列表
						this.$refs.chatList.userTalkList();
						break;
					case 1:
						// 刷新朋友圈
						// this.$refs.chatList.userTalkList();
						break;
					case 2:
						// 刷新发现
						// this.$refs.chatList.userTalkList();
						break;

				}

			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		},
	}
</script>

<style lang="scss">
	.u-tabs-item {
		color: #010101 !important;
	}

	.firends-box {
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		padding-top: 36rpx;
	}

	.find-box {
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		padding: 36rpx 44rpx;
	}
</style>
<style lang="scss" scoped>
	@import "./index.scss";
</style>